Cara terbaik untuk meningkatkan performa website
Website dengan performa yang baik memiliki engagement, retensi dan juga konversi yang tinggi dari pengunjung. Mengingat bagaimana pengguna bisa berubah-ubah, ditambah juga dengan fakta bahwa pengunaan perangkat mobile cukup signifikan pada masa ini, tidak pernah sebelumnya kecepatan suatu website diperhitungkan.
Performa website dan kekurangan nya didokumentasikan dengan baik selama beberapa lama oleh amazon .
Pada tahun 2007 memberitahukan bahwa setiap peningkatan 100 ms (millisecond) pada waktu pemuatan situs Amazon.com, maka penjualan mereka berkurang 1%. Google juga melaporkan hasil yang sama di tahun 2006 pada produk mereka Google Maps.
Google menemukan bahwa dengan mengurangi ukuran dari halaman mereka dari 100KB menjadi 80KB, traffic mereka naik 10% pada minggu pertama dan 25% pada minggu berikutnya.
Memperkecil HTML, CSS, & JavaScript
Untuk memahami kode yang kita tulis, kita terkadang memformatnya dengan cara agar kita bisa mudah membacanya, dengan kata lain formatnya lebih human-friendly. Lihatlah contoh kode di bawah ini:
<form action=”#” method=”post”>
<div>
<label for=”name”>Text Input:</label>
<input type=”text” name=”name” id=”name” value=”” tabindex=”1″ />
</div>
</form>
.Untuk memahami kode yang kita tulis, kita terkadang memformatnya dengan cara agar kita bisa mudah membacanya, dengan kata lain formatnya lebih human-friendly. Lihatlah contoh kode di bawah ini:
<form action=”#” method=”post”><div><label for=”name”>Text Input:</label><input type=”text” name=”name” id=”name” value=”” tabindex=”1″/></div></form>
Perkiraan ini lebih mudah dibaca, versi human-friendly ini memiliki banyak karakter yang tidak diperlukan. Ini tidak terlalu bedampak pada website kecil tetapi bagi website yang berskala besar peristiwa ini merugikan
Anda bisa mengecilkan HTML, CSS & JavaScript. Jika Anda belum melakukan ini maka anda perlu berpikir untuk itu sekarang. Untungnya untuk kita ada banyak tools secara online yang dapat membantu mengecilkan dan mengembalikan kode kita seperti YUI compressor.
Mengoptimalkan Gambar
Salah satu penyebab terjadinya lag yaitu gambar. Cobalah untuk memakai grafis daripada gambar . Ini bisa lebih baik untuk elemen seperti button, tapi pada beberapa kasus CSS mungkin tidak dapat digunakan untuk menciptakan desain seperti foto, atau grafis dekoratif yang mendetail.
- Sprites
kunci untuk mempercepat website adalah meminimalisir jumlah http request. Setiap gambar pada website memerlukan satu http request ke server. Mayoritas, browser bisa melakukan beberapa permintaan (ke domain yang sama) secara bersamaan, itulah kenapa terbentuk suatu bentuk antrian. Cara untuk mengurangi jumlah request dengan menggabungkan beberapa gambar menjadi satu.
Kekurangan sprites yaitu teknik pembuatan nya yang susah tapi ada alat online yang dapat membuat sprites . Salah satunya adalah SpritePad. SpritePad dapat melakukannya dengan cukup mudah ,caranya yaitu drag & drop gambar Anda dan mereka akan langsung membuatnya menjadi sprite dengan format PNG + kode CSS nya.
- Losslessly Compressing Images
Membuat foto atau bahan anda menjadi sprite memang tidak mudah, karena itu kita perlu melakukan ‘kompresi gambar’ , dengan mengkompresnya kita dapat menghemat byte
Seringkali ketika kita menyimpan gambar dengan software seperti Fireworks atau Photoshop file yang dihasilkan mengandung data tambahan, termasuk data warna yang mungkin tidak dipakai dan bahkan data meta. Dengan mengkompresi gambar tanpa menghilangkan tampilan gambar atau kualitas visual Anda bisa menyimpan data yang perlu didownload. Layanan Yahoo seperti smush.it adalah salah satu alat yang baik untuk melakukan ini. Hanya dengan unggah gambar yang ingin Anda ‘smush’ dan smush.it akan mengkompresi gambar anda.
- Data URIs
Cara lain untuk mengurangi jumlah http request dari gambar adalah membuatnya menjadi data uris. Data URIs bisa dideskripsikan sebagai
Mengenkripsi kedua gambar dan font menjadi data string yang dapat langsung diintegrasikan ke markup dan stylesheet Anda
Kesimpulan
Saya harap Anda belajar beberapa hal tentang mengoptimasi kecepatan website dan bagaimana cara untuk mengimplementasikan beberapa metode ke dalam projek Anda. Dengan mempraktikan apa yang telah kita bahas Anda akan mendorong pengunjung untuk terus kembali, tetap berada di situs Anda dan menikmati pengalaman browsing yang menyenangkan di website Anda.
Kebutuhan akan digital IT sangat dibutuhkan dalam kegiatan sehari-hari, Bead IT Consultant merupakan pilihan tepat sebagai partner anda,kunjungi website kami dengan klik link ini : www.beadgrup.com